<template>
	<div id="appRoot">
		<sidebar>
			<card label="指标类型管理">
				<el-button slot="header" type="primary" size="small" @click="openAddDialog()">新建指标类型</el-button>
				<div class="from-query">
					<el-form :inline="true" class="demo-form-inline" @submit="qrySubmit">
						<el-form-item label="搜索">
							<el-input size="small" v-model="queryData.busiName" placeholder="输入指标名关键字"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="getTableData(1)">查询</el-button>
						</el-form-item>
					</el-form>
				</div>
			</card>
			<div class="table-container" v-loading.body="loading">
				<template v-if="tableDataError">
					<table-data-fail type="error"></table-data-fail>
				</template>
				<template v-else-if="tableData.length > 0">
					<el-table
							:data="tableData"
							stripe
							border
							style="width: 100%">
						<el-table-column
								prop="busiName"
								align="center"
								header-align="left"
								label="指标大类">
						</el-table-column>
						<el-table-column
								align="center"
								header-align="left"
								label="更新时间">
							<template scope="scope">
								{{scope.row.date}}
							</template>
						</el-table-column>
						<el-table-column
								align="center"
								header-align="left"
								label="操作">
							<template scope="scope">
								<el-button type="text" size="small" @click="modDialog(scope.row.busiId, scope.row.busiName)">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-wrapper">
						<el-pagination
								@current-change="getTableData()"
								:current-page.sync="paginationData.currentPage"
								:page-size="paginationData.pageSize"
								layout="total, prev, pager, next, jumper"
								:total="paginationData.total">
						</el-pagination>
					</div>
				</template>
				<template v-else>
					<table-data-fail type="empty"></table-data-fail>
				</template>
			</div>
		</sidebar>
		<el-dialog :title="dialogTitle" :visible.sync="dialogAddDataVisible" @close="closeAddDialog" class="dialog-form">
			<el-form :model="dialogAddData" :rules="rules" ref="ruleForm">
				<el-form-item label="指标名称：" :label-width="'120px'" prop="busiName">
					<el-input v-model="dialogAddData.busiName" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeAddDialog">取 消</el-button>
				<el-button type="primary" @click="submitAddDialog">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
    import sidebar from 'components/layout/sidebar.vue'
    import card from 'components/layout/card.vue'
    import tableDataFail from 'components/layout/tableDataFail.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
    export default{
        data(){
            return{
                loading: false,
                queryData: {
                    busiName: ''
                },
                paginationData:{
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                tableDataError: false,
                tableData: [],

                dialogAddDataVisible: false,
                dialogTitle: '添加',
                dialogAddData:{
                    busiName: '',
                    busiId: ''
                },
                rules: {
                    busiName: [
                        {required: true, message: '请填写指标名称', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted(){
            this.getTableData();
        },
        methods: {
            modDialog(busiId, busiName){
                this.dialogAddData.busiId = busiId;
                this.dialogAddData.busiName = busiName;
                this.openAddDialog('修改');
			},
            closeAddDialog(){
                this.dialogAddDataVisible = false;
                this.resetForm();
			},
            openAddDialog(title = '添加'){
                this.dialogAddDataVisible = true;
                this.dialogTitle = title;
			},
            submitAddDialog(){
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.sendAdd();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
			},
            sendAdd(){
                let action = 'addBusinessConfig';
                let sendData = {};
                if(this.dialogAddData.busiId){
                    action = 'modBusinessConfig';
                    sendData = {
                        busiName: this.dialogAddData.busiName,
                        busiId: this.dialogAddData.busiId
					}
				}else{
                    sendData = {
                        busiName: this.dialogAddData.busiName
                    }
				}
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.businessConfig,
                    action: action,
                    data: sendData
                }).then(data => {
                    this.closeAddDialog();
                    this.resetTableData();
                }).catch((err) => {

                })
			},
            resetForm(){
                this.$refs.ruleForm.resetFields();
                this.dialogAddData = {
                    busiName: '',
					busiId: ''
                }
            },
            resetTableData(){
                this.paginationData.currentPage = 1;
                this.getTableData();
            },
            qrySubmit(e){
                e.stopPropagation();
                console.log(1);
                return;
                this.getTableData(1);
			},
            getTableData(current){
                let data = {
                    pageNum: current || this.paginationData.currentPage,
                    pageRow: this.paginationData.pageSize
                };
                data = Object.assign(data, this.queryData);
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.businessConfig,
                    action: 'qryBusinessConfig',
                    data: data
                }).then(function (data) {
                    this.tableData = data.data.items || [];
                    this.paginationData.total = data.data.totalNum || 0;
                }.bind(this)).catch(function (err) {

                })
            }
        },
        components:{
            sidebar,
            card,
            tableDataFail
        }
    }
</script>

<style lang="scss">
</style>